<!-- 首页 -->
<template>
	<view class="container">
		<TopNav title="才艺认证" bg-color="#fff"></TopNav>
		<view class="check-banner progress" v-if="detailData && detailData.status == 0">
			<image src="/static/images/index/check.png" mode=""></image>
			<text>资料正在审核中，请耐心等待。</text>
		</view>
		<view class="check-banner pass" v-else-if="detailData && detailData.status == 1">
			<image src="/static/images/index/pass.png" mode=""></image>
			<text>资料审核通过。</text>
		</view>
		<view class="check-banner reject" v-else-if="detailData && detailData.status == 2">
			<image src="/static/images/index/reject.png" mode=""></image>
			<text>资料审核不通过，请重新提交申请。</text>
		</view>
		<view class="main">
			<view class="f-s16 f-w500 line-height22">
				<text>基本信息</text>
			</view>
			<FormSelect title="才艺项目" placeholder="请选择你的才艺" picker-title="请选择才艺" class="m-t11"
				:value="form.accomplishment.length">
				<accomplishmentPicker v-model="selection" :list="list"></accomplishmentPicker>
				<template #value>
					<view class="selection" @click.stop>
						<view class="selection-item" v-for="(item,index) in form.accomplishment" :key="item.id">
							<text>{{item.type_title}}</text>
							<image src="/static/images/login/close.png" class="width-14 height-14 m-l6" mode=""
								@click="handleRemoveSelection(index)"></image>
						</view>
					</view>
				</template>
			</FormSelect>
			<view class="f-s16 f-w500 line-height22 m-t16 m-b12">
				<text>荣誉信息</text>
			</view>
			<view class="m-b16" v-for="(item,index) in form.accomplishment" :key="item.value">
				<view class="">
					<text class="f-s12 f-w500 line-height17">{{index + 1}}、{{item.type_title}}</text>
				</view>
				<view class="m-t6">
					<FormInput v-model="item.title" title="才艺等级或者荣誉名称" placeholder="请填写你的才艺等级名称或荣誉名称" class="m-t11">
					</FormInput>
				</view>
			</view>
			<view class="p-tb15" v-if="form.accomplishment.length === 0">
				<FormInput title="才艺等级或者荣誉名称" placeholder="请选择才艺项目后填写" class="m-t11" readonly></FormInput>
			</view>

			<view class="m-t28 m-b12">
				<view class="">
					<text class="f-w500 f-s15 line-height22">才艺等级或者荣誉证明</text>
				</view>
				<view class="m-t8">
					<text class="line-height20 text-gray f-s14">注意：1、请上传本人证书实拍图片；2、上传内容仅审核时查看，不对外展示；</text>
				</view>
			</view>
			<view class="m-b16" v-for="(item,index) in form.accomplishment" :key="item.value">
				<view class="">
					<text class="f-s12 f-w500 line-height17">{{index + 1}}、{{item.type_title}}</text>
				</view>
				<view class="m-t6">
					<UploadImage width="220rpx" height="220rpx" :limit="2" v-model="item.album">
						<view class="upload-image">
							<image src="/static/images/login/photo.png" class="width-28" mode="widthFix"></image>
							<text class="m-t8 text-gray f-s12">上传照片</text>
						</view>
					</UploadImage>
				</view>
			</view>
			<view class="p-tb15" v-if="form.accomplishment.length === 0">
				<text class="f-w500 f-s15 text-gray p-l10">请先选择才艺项目</text>
			</view>
		</view>
		<view class="fixed-bottom bg-white p-lr16">
			<view class="self-btn full-width" hover-class="pressed" @click="handleSubmit">
				<text>确认</text>
			</view>
		</view>
		<Toast></Toast>
		<Modal :show.sync="modalShow" title="提示" content="您是否确认提交审核？\n如果存在正在审核中数据将被覆盖" @confirm="handleModalConfirm()">
		</Modal>
	</view>
</template>

<script>
	import Modal from '@/components/modal'
	import UploadImage from '@/components/upload-image'
	import FormSelect from '@/components/form-select'
	import FormInput from '@/components/form-input'
	import EducationPicker from '@/pages/login/components/education-picker.vue'
	import accomplishmentPicker from '@/pages/mine/auth/accomplishment/accomplishment-picker.vue'
	import {
		authStepsDetails,
		accomplishmentList,
		accomplishmentAuth
	} from "@/api/mine/auth.js"
	import {
		async
	} from 'regenerator-runtime'
	export default {
		name: "",
		components: {
			UploadImage,
			FormSelect,
			FormInput,
			EducationPicker,
			accomplishmentPicker,
			Modal
		},
		data() {
			return {
				modalShow: false,
				detailData: {},
				list: [],
				selection: [],
				form: {
					accomplishment: []
				}
			}
		},
		onLoad() {
			(async () => {
				await this.getAccomplishmentList()
				this.getDetail()
			})()
		},
		watch: {
			selection: {
				deep: true,
				handler(val) {
					if (val.length) {
						let accomplishmentList = this.form.accomplishment
						val.forEach((item, index) => {
							let findResult = accomplishmentList.find(findItem => findItem.type == item.value)
							if (!findResult) {
								this.form.accomplishment.splice(index, 0, {
									type: item.value,
									type_title: item.label,
									title: '',
									album: ''
								})
							}
						})
					} else {
						this.form = {
							accomplishment: []
						}
					}
				}
			}
		},
		methods: {
			handleModalConfirm() {
				this.$modal.loading("提交中").then(() => {
					accomplishmentAuth(this.form).then(res => {
						this.$modal.closeLoading()
						this.getDetail()
						this.$toast(res.msg)
					}).catch(() => this.$modal.closeLoading())
				})
			},
			handleSubmit() {
				if (!this.validateForm(this.form)) return
				this.modalShow = true

			},
			validateForm(form) {
				// 校验学历
				if (!form.accomplishment.length) {
					this.$toast('请选择才艺');
					return false;
				} else {
					for (let item of form.accomplishment) {
						if (!item.title) {
							this.$toast(`请填写${item.type_title}荣誉信息`);
							return false;
						} else if (!item.album) {
							this.$toast(`请上传${item.type_title}荣誉证明`);
							return false;
						}
					}
				}
				// 所有校验通过
				return true;
			},
			async getAccomplishmentList() {
				await accomplishmentList().then(res => {
					let {
						data
					} = res
					this.list = data?.map(item => {
						return {
							label: item.title,
							value: item.id
						}
					}) ?? []
				})
			},
			getDetail() {
				authStepsDetails({
					auth_type: 7
				}).then(res => {
					let {
						data: {
							auth_detail
						}
					} = res
					if (auth_detail?.some(item => item.status == 2)) {
						// 只要有一项被驳回
						this.detailData.status = 2
					} else if (auth_detail?.some(item => item.status == 0)) {
						// 只要有一项是审核中
						this.detailData.status = 0
					} else if (auth_detail?.some(item => item.status == 1)) {
						this.detailData.status = 1
					}
					this.form.accomplishment = auth_detail?.map(item => {
						return {
							type_title: item.type_title,
							type: item.type,
							title: item.title,
							album: item.album.join(',')
						}
					}) ?? []
					this.selection = auth_detail?.map(item=>{
						return {label:item.type_title,value:item.type}
					})
				})
			},
			handleRemoveSelection(index) {
				this.form?.accomplishment?.splice(index, 1)
				this.selection.splice(index, 1)
			}
		}
	}
</script>
<style lang="scss">
	@import '@/common/css/var.scss';

	page {
		background-color: #fff;
		@include fixed-bottom;
	}
</style>
<style scoped lang="scss">
	.container {
		.selection {
			display: flex;
			flex-wrap:wrap;

			.selection-item {
				margin-right: 10rpx;
				padding: 8rpx 8rpx 8rpx 12rpx;
				background: #EBECED;
				border-radius: 8rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #202020;
				line-height: 32rpx;
				display: flex;
				align-items: center;
				margin-top: 10rpx;
			}
		}

		.main {
			padding: 24rpx 32rpx;
		}
	}
</style>